[jQuery] 基礎語法起手式

第 12 屆 iThome 鐵人賽

DAY 21

Modern Web

For 前端小幼苗的圖解筆記系列第 21 篇

12th鐵人賽

Eudora

2020-10-06 18:17:52

3253 瀏覽

分享至

來寫 code 之前，先用比較白話的方式去理解語法。
記住這三件事:

When: 什麼情況下執行？（事件觸發）
Who: 指定誰？(抓取物件)
How: 執行什麼動作？

事件觸發 (event)

指定「當發生什麼事件時」執行……

如下列：當 button 被點擊時，將執行...

$('button').click(function(){
   ...
})

.click() 為一個事件（event）

參考官方文件 events 列表：jQuery-Events

選定物件（對象）

基本語法：

$('selector')

括號內直接以最熟悉的 CSS 選擇器寫法，就可以指定了！超方便 der
欸？為什麼說「方便」？來復習一下前N篇提到 JavaScript要抓取 DOM 物件時的語法：
- document.querySelector('.class')
- document.getElementById('id')
- document.getElementsByClassName('class')
用 jQuery 只要寫這樣：$('.class') 。真是簡潔清爽啊～

jQuery 不是一個程式語言，而是一種 JavaScript 函式庫。讓我們能以更精簡、直覺的語法去實作 JavaScript。（參考 MDN）

來顆栗子:
- 假設我有 1 篇文章列表，HTML 結構如下：
```
  <div class="post">
    <p>title1</p>
    <span class="btn-more">ReadMore</span>
    <article>content content ...</article>
  </div>
```
  - 文章(.post)裡面有：
    - 標題(.title)
    - 閱讀更多的觸發按鈕（.btn-more）
    - 預設隱藏的內文區塊（article）
      　　
- 以 jQuery 操控：當 .btn-more 被 click 時，將原先隱藏的 article 顯示；若 article 本來就顯示，則需隱藏：
```
$('.btn-more').click(function(){
    $('article').slideToggle();
})
```
但如果今天我的文章不只一篇呢？

來看看變化的栗子：
```
  <div class="post">
    <p>title1</p>
    <span class="btn-more">ReadMore</span>
    <article>content content ...</article>
  </div>

  <div class="post">
    <p>title2</p>
    <span class="btn-more">ReadMore</span>
    <article>content content ...</article>
  </div>

  <div class="post">
      ...
  </div>
  ...
```
這時 jQuery 如果保持前顆栗子的寫法，則點任何一篇文章的 btn-more，會將「所有」文章都展開。

jQuery 應改寫如下:
```
$('.btn-more').click(function(){
    $(this).next('article').slideToggle();
})
```
改了 $(this) 以及後面接著的 .next(' ')：
jQuery 遍歷方法 (Traversing Methods)

上段 code $('.selector1'). next('selector2 ') 取得selector1的同輩元素selector2。
jQuery 提供我們更多比 CSS Selector 更多、更彈性的方法去抓取對應的元素。
完整方法列表傳送門：jQuery-Traversing
$(this)

在栗子中，$('article') 有很多個，但我只想限定被 click 的那一個 $('.btn-more') 鄰近的$('article') 執行動作，故使用 $(this) 可只抓到觸發該事件( .click() )的那一個 $('article')。